<template>
	<div>
		<div class="title">推荐歌单</div>

		<!-- vant组件歌单 -->
		<van-row gutter='8'>
			<van-col span="8" v-for="item in relist" :key="item.id">

						<!-- 图片 -->
						<van-image
							width="100%"
							height="3rem"
							fit="cover"
							:src="item.picUrl"
						/>
						<p class="song_name"> {{ item.name }} </p>
			</van-col>
		</van-row>

		<!-- ----------------- 推荐音乐部分 --------------------- -->

		<div class="title">推荐音乐</div>

			<SongItem v-for="item in newList" :key="item.id"
								:title="item.name"
								:label="item.song.artists[0].name"
								:id="item.id"
			></SongItem>


	</div>
</template>

<script>
import {recommendMusic, newSong} from '@/api'
import SongItem from '@/components/SongItem.vue'

	export default {
		components: {
			SongItem
		},

		data () {
			return {
				relist: [],

				newList: []
			}
		},

		async created () {
			//获取推荐歌单
			const {data: res} = await recommendMusic({
				limit: 6
			})
			console.log(res.result);
			this.relist = res.result

			//获取推荐音乐
			const {data} = await newSong({
				limit: 30
			})
			console.log(data.result);
			this.newList = data.result
		},

		
	}
</script>

<style scoped>
	/* 标题 */
	.title {
		padding: 0.266667rem 0.24rem;
		margin: 0 0 0.24rem 0;
		background-color: #eee;
		color: #333;
		font-size: 15px;
	}

	/* 推荐歌单 - 歌名 */
	.song_name {
		font-size: 0.346667rem;
		padding: 0 0.08rem;
		margin-bottom: 0.266667rem;
		line-height: 1.5;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
		overflow: hidden;
		/** 隐藏超出的内容 **/
	}
</style>
